<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />

    <!-- 数据列表 -->
    <el-card shadow="never" :body-style="{ padding: '10px' }" class="mt10">
      <div slot="header" class="mb9 f16">
        <span style="font-weight: 600">查询资料</span>
      </div>
      <Table
        :tableData="tableData"
        :tableHeader="tableHeader"
        :TableHeight="100"
        :outTableHeight="80"
        stripe
        @currentRow="CurrentRow"
        summary
        :summaryData="summaryData"
      />
      <!-- 分页器 -->
      <div class="bottom">
        <span class="total">共{{ total }}项数据</span>
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[20, 30, 40, 60]"
          layout="sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <div>
          <el-button class="save" type="primary" size="default" @click="">保存</el-button>
          <el-button type="primary" size="default" @click="">打印</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, watch } from 'vue'
import { reactive, ref } from 'vue'
import Api from '@/api/GeneralManager/inquire/AggregateSchedulingLi'
import type { formListType } from '@/components/Find/index.vue'
import { selectList } from '@/plugins/mixin'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'TotalProgressQuery'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
// 表格数据
const srcList = ref([])
const tableData = ref([])
const formList = ref<any>([
  {
    type: 'select',
    selectValue: '',
    selectP: '生产线',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '货号',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'date',
    dateLabel: '交期',
    dateValue: ''
  },
  {
    type: 'date',
    dateLabel: '开始日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '清空'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  }
])

const summaryData = ref([
  {
    index: 11,
    num: 0
  },
  {
    index: 7,
    num: 0
  }
])

// 获取表格数据
const TableList = async () => {
  // console.log(lotNO());
  const lotNO = formList.value.find(
    (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入指令'
  )?.inputValue as string
  const style = formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '货号')
    ?.selectValue as string
  const line = formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '生产线')
    ?.selectValue as string
  const deliveryEndDate =
    formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '交期')
      ?.dateValue === null
      ? ''
      : (
          formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '交期')
            ?.dateValue as string
        )[1]
  const deliveryStartDate =
    formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '交期')
      ?.dateValue === null
      ? ''
      : (
          formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '交期')
            ?.dateValue as string
        )[0]
  const beginStartTime =
    formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '开始日期')
      ?.dateValue === null
      ? ''
      : (
          formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '开始日期')
            ?.dateValue as string
        )[0]
  const beginEndTime =
    formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '开始日期')
      ?.dateValue === null
      ? ''
      : (
          formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '开始日期')
            ?.dateValue as string
        )[1]
  try {
    let Data = await Api.getTableList({
      beginEndTime, //开始交期结束时间	''	true
      beginStartTime, //开始交期开始时间	''	true
      deliveryEndDate, //交期结束时间	''	true
      deliveryStartDate, //交期开始时间	''	true
      line, //生产线	''	true
      lotNO, //指令	''	true
      pageNum: currentPage.value, //integer	true
      pageSize: pageSize.value, //integer	true
      style //工厂货号	''	true
    })
    let dataList: any = Data.lists.map((item: any) => {
      item.seqNo = parseFloat(item.seqNo).toFixed(2)
      item.orderQty = parseFloat(item.orderQty).toFixed(2)
      item.prodDays = parseFloat(item.prodDays).toFixed(2)
      return item
    })
    // console.log(Data);
    srcList.value = dataList.map((item: any) => {
      return item.stylePhoto
    })
    tableData.value = dataList
    total.value = Data.total
    summaryData.value[0].num = Data.totalDays as number
    summaryData.value[1].num = Data.totalOrders as number
  } catch (error) {
    console.log(error)
  }
}
// 获取下拉框数据
const getSelectList = async () => {
  await selectList(formList, Api.getSelectList)
}
// 初始化加载数据
onMounted(async () => {
  TableList()
  getSelectList()
})
const tableHeader = ref([
  {
    label: '安排日期',
    prop: 'scheduleNo'
  },
  {
    label: '生产线',
    prop: 'line'
  },
  {
    label: '序号',
    prop: 'seqNo'
  },
  {
    label: '指令',
    prop: 'lotNO',
    width: '160'
  },
  {
    label: '样品类型',
    prop: 'sampleType'
  },
  {
    label: '工厂货号',
    prop: 'style'
  },
  {
    label: '颜色',
    prop: 'color'
  },
  {
    label: '订单量',
    prop: 'orderQty'
  },
  {
    label: '交期',
    prop: 'deliveryDate'
  },
  {
    label: '安排数量',
    prop: 'scheduleQty'
  },
  {
    label: 'IE日产能',
    prop: 'stdQty'
  },
  {
    label: '生产天数',
    prop: 'prodDays'
  },
  {
    label: '开始日期',
    prop: 'beginDate'
  },
  {
    label: '结束日期',
    prop: 'endDate'
  },
  {
    type: 'img',
    prop: 'stylePhoto',
    label: '图片',
    fixed: true,
    srcList
  }
])

// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
// 分页器
const handleSizeChange = (val: number) => {
  pageSize.value = val
  TableList()
}
const handleCurrentChange = (val: number) => {
  // console.log(val);
  currentPage.value = val
  TableList()
}
const CurrentRow = () => {}

// 监听查询
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    TableList()
  }
)
const findClicked = (content: string) => {
  formList.value.forEach((item: any) => {
    item.inputValue = ''
    item.selectValue = ''
    item.dateValue = ''
    item.dateValue = ''
    item.checked = true
  })
  TableList()
}
</script>

<style lang="less" scoped>
.btns {
  display: flex;
  justify-content: space-between;

  .bg {
    background-color: #e7e7e7;
    border: 1px solid #e7e7e7;
    color: #000000;
  }
}

// 底部
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;

  .total {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
    font-family: PingFangSC-Regular-, PingFangSC-Regular;
  }

  :deep(.el-pagination .el-select .el-input) {
    width: 60px;
  }

  :deep(.number) {
    border: 1px solid #dcdcdc;
    box-sizing: border-box;
    margin-right: 4px;
    border-radius: 2px 2px 2px 2px;
  }

  :deep(.is-active.number) {
    background-color: #f89027 !important;
    color: white;
    border-radius: 2px 2px 2px 2px;
  }

  .save {
    color: black;
    border: 1px solid #e7e7e7;
    background: #e7e7e7;
  }
}
</style>
